<template>
  <div>
      <a-button id="new" @click="handleAdd">新建班级</a-button>
      <a-modal v-model="visible" title="新建班级" ok-text="确认" cancel-text="取消"  @ok="handleSubmit">
        <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-form-item label="班号" >
                  <a-input v-decorator="['id', { rules: [{ required: true, message: '请输入班号' }] }]"/>
              </a-form-item>
              <a-form-item label="班名" >
                  <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入班名' }] }]"/>
              </a-form-item>
          </a-form>
          </a-modal>
  </div>
</template>

<script>
  import { request } from "../../../api/index";
  export default {
    name: 'classAdd',
    data () {
      return {
        form: this.$form.createForm(this),
        values:{
          id:'',
          name:'',
        },
        visible : false,
      }
    },
    methods: {
      value(){
        this.form.setFieldsValue({
          id:this.values.id,
          name:this.values.name,
        })
      },
      handleSubmit (e) {
        this.visible = false;
        e.preventDefault()
        this.form.validateFields((err, value) => {
          if (!err) {
            this.values = value;
            // console.log(this.values.id,this.values.name);
            // console.log(typeof this.values.id);
            // console.log(typeof this.values.name);
            request({
                url: "/class/class_create",
                method: "post",
                data: {
                    class_id: this.values.id,
                    class_name: this.values.name
                },
            })
                .then((res) => {
                    // console.log(res)
                    if (res.data.message == "success"){
                        alert("添加成功");
                        this.$parent.refreshS()
                    }
                    else{
                        alert("添加失败")
                    }
                })
                .catch((err) => {
                    // console.log(err)
                });
           }
        })
      },
      handleAdd() {
        this.visible = true;
      },
    }
  }
</script>
<style lang='less' scoped>
  #new{
  float: left;
}
</style>